<template>
  <el-card>
    <div slot="header">
      <span>类别管理</span>
    </div>
    <el-form inline>
      <el-form-item>
        <el-input v-model="cateTitle" placeholder="类别名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="search">搜索</el-button>
      </el-form-item>
    </el-form>
    <div style="display: flex;margin-bottom: 20px">
      <el-input placeholder="根节点名称" v-model="root"></el-input><el-button @click="addRoot">添加根节点</el-button>
    </div>
    <el-tree
      :data="tags"
      :props="{label: 'name'}"
      node-key="id"
      default-expand-all
      show-checkbox
      :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            type="text"
            size="mini"
            v-show="data.level !== 3"
            @click="() => append(data)">
            新增
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => remove(node, data)">
            删除
          </el-button>
        </span>
      </span>
    </el-tree>
  </el-card>
</template>

<script>
  import {getAllCategory} from "../../api/item";
  import {updateCategory} from "../../api/category";

  export default {
    name: "index",
    data() {
      return {
        cateTitle: '',
        dynamicTags: [],
        inputVisible: false,
        inputValue: '',
        tags: [],
        root: '',
      };
    },
    methods: {
      async addRoot() {
        if (!this.root) {
          this.$message.error('请输入根节点名称');
          return;
        }
        let data = {
          name: this.root,
        };
        await updateCategory(data);
        this.getAllCategory();
        this.root = '';
      },
      append(data) {
        console.log(data)
        let parentID = data.id
        console.log(parentID);
        this.$prompt('请输入类型名', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(async ({ value }) => {
          let data = {
            name: value,
            parentId: parentID,
          };
          await updateCategory(data);
          this.getAllCategory();
        })
      },
      async remove(node, data) {
        await updateCategory({
          deleted: 1,
          id: data.id
        });
        this.getAllCategory();
      },
      search() {

      },
      async getAllCategory() {
        let res = await getAllCategory();
        let tags = [];
        res.categories.map(v => {
          if (v.parentId === 0) {
            v.children = [];
            let id = v.id;
            res.categories.map(vv => {
              if (vv.parentId === id) {
                vv.children = [];
                let sid = vv.id;
                res.categories.map(vvv => {
                  if (vvv.parentId === sid) {
                    vvv.level = 3;
                    vv.children.push(vvv)
                  }
                });
                vv.level = 2;
                v.children.push(vv)
              }
            });
            v.level = 1;
            tags.push(v)
          }
        });
        console.log(tags)
        this.tags = tags;
      }
    },
    created() {
      this.getAllCategory()
    }
  }
</script>

<style scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
    margin-bottom: 8px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .custom-tree-node {
    border-bottom: 1px solid #e8e8e8;
    width: 60%;
    max-width: 400px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
